<template>
  <div class="upload-img">
    <div class="avatar-btn">
      <q-btn color="primary" label="Primary" @click="handleToggle" />
      <crop-upload
        v-model="show"
        :width="300"
        :height="300"
        field="img"
        url="/upload"
        img-format="png"
        @crop-success="cropSuccess"
        @crop-upload-success="cropUploadSuccess"
        @crop-upload-fail="cropUploadFail"
      >
      </crop-upload>
      <img :src="imgDataUrl || defaultAvatar" />
    </div>
  </div>
</template>

<script>
import CropUpload from "vue-image-crop-upload"

export default {
  name: "Upload",
  components: {
    "crop-upload": CropUpload,
  },
  props: {
    url: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      defaultAvatar: require("@/assets/default_avatar.png"),
      show: false,
      imgDataUrl: "",
    }
  },
  methods: {
    // 打开选择图片
    handleToggle() {
      this.show = !this.show
    },
    // 裁剪完成
    cropSuccess(imgDataUrl) {
      this.imgDataUrl = imgDataUrl
    },
    // 裁剪上传完成
    cropUploadSuccess() {},
    // 裁剪上传失败
    cropUploadFail() {},
  },
}
</script>

<style lang="scss" scoped>
.upload-img {
  width: 400px;
  // height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
